<!--  -->
<template>
    <div class="">
        <el-form label-position="right" :model="formData" label-width="70px">
            <el-row :gutter="30">
                <el-col :span="5">
                    <el-popover
                        placement="bottom"
                        width="600"
                        trigger="manual"
                        v-model="tableVisible.charterVisible"
                    >
                        <el-table
                            :data="gridData"
                            element-loading-text="稍等, 正加载中..."
                            @row-click="rowClick"
                            v-loading="listLoading"
                        >
                            <el-table-column property="Charter" label="承租人"></el-table-column>
                            <el-table-column property="Phone" label="电话号码"></el-table-column>
                            <el-table-column property="address" label="地址"></el-table-column>
                        </el-table>
                        <el-form-item slot="reference" label="承租人">
                            <el-input
                                @blur="handleBlur"
                                @focus="handleFocus"
                                @keyup.enter.native="handleOpen(formData.Charter,1)"
                                v-model="formData.Charter"
                                placeholder="按回车键进行查询"
                            >
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-popover>
                </el-col>
                <el-col :span="5">
                    <el-popover
                        placement="bottom"
                        width="600"
                        trigger="manual"
                        v-model="tableVisible.contractVisible"
                    >
                        <el-table
                            :data="gridData"
                            element-loading-text="稍等, 正加载中..."
                            @row-click="rowClick"
                            v-loading="listLoading"
                        >
                            <el-table-column property="Charter" label="承租人"></el-table-column>
                            <el-table-column property="Phone" label="电话号码"></el-table-column>
                            <el-table-column property="address" label="地址"></el-table-column>
                        </el-table>
                        <el-form-item slot="reference" label="合同号">
                            <el-input
                                @blur="handleBlur"
                                @focus="handleFocus"
                                @keyup.enter.native="handleOpen(formData.ContractNo,2)"
                                v-model="formData.ContractNo"
                                placeholder="按回车键进行查询"
                            >
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-popover>
                </el-col>
                <el-col :span="5">
                    <el-popover
                        placement="bottom"
                        width="600"
                        trigger="manual"
                        v-model="tableVisible.phoneVisible"
                    >
                        <el-table
                            :data="gridData"
                            element-loading-text="稍等, 正加载中..."
                            @row-click="rowClick"
                            v-loading="listLoading"
                        >
                            <el-table-column property="Charter" label="承租人"></el-table-column>
                            <el-table-column property="Phone" label="电话号码"></el-table-column>
                            <el-table-column property="address" label="地址"></el-table-column>
                        </el-table>
                        <el-form-item slot="reference" label="联系电话">
                            <el-input
                                @blur="handleBlur"
                                @focus="handleFocus"
                                @keyup.enter.native="handleOpen(formData.Phone,3)"
                                v-model="formData.Phone"
                                placeholder="按回车键进行查询"
                            >
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-popover>
                </el-col>
                <el-col :span="5">
                    <el-popover
                        placement="bottom"
                        width="600"
                        trigger="manual"
                        v-model="tableVisible.idnoVisible"
                    >
                        <el-table
                            :data="gridData"
                            element-loading-text="稍等, 正加载中..."
                            @row-click="rowClick"
                            v-loading="listLoading"
                        >
                            <el-table-column property="Charter" label="承租人"></el-table-column>
                            <el-table-column property="Phone" label="电话号码"></el-table-column>
                            <el-table-column property="address" label="地址"></el-table-column>
                        </el-table>
                        <el-form-item slot="reference" label="证件号">
                            <el-input
                                @blur="handleBlur"
                                @focus="handleFocus"
                                @keyup.enter.native="handleOpen(formData.IDNo,4)"
                                v-model="formData.IDNo"
                                placeholder="按回车键进行查询"
                            >
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-popover>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="房屋性质">
                        <el-input v-model="formData.CardType"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="5">
                    <el-form-item label="房屋地址">
                        <el-input v-model="formData.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="产权单位">
                        <el-input v-model="formData.item_3d3ca6763962e9f769db67e95c7d2aff"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="合同面积">
                        <el-input v-model="formData.Phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="起止日期">
                        <el-date-picker
                            style="width:100%"
                            clearable
                            v-model="formData.ChartBeginDate"
                            value-format="timestamp"
                            start-placeholder="合同开始日期"
                            range-separator="至"
                            end-placeholder="合同结束日期"
                            type="datetimerange"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="5">
                    <el-form-item label="月租金">
                        <el-input v-model="formData.hire"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="租凭标准">
                        <el-input v-model="formData.RentalStandard"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="交租方式">
                        <el-select
                            style="width:100%"
                            v-model="formData.status"
                            placeholder="交租方式"
                            clearable
                        ></el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="保证金">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="合同总额">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="5">
                    <el-form-item label="未交租金">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="本次交租">
                        <el-input></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="发票号">
                        <el-input v-model="formData.IDNo"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getChartInfoRoom } from "@/api/rent";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    // formData: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  data() {
    //这里存放数据
    return {
      gridData: [],
      tableVisible: {
        charterVisible: false,
        contractVisible: false,
        phoneVisible: false,
        idnoVisible: false
      },
      formData: {},
      listLoading: true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleFocus(item) {
      this.initTableVisible();
    },
    handleBlur(item) {
      this.initTableVisible();
      console.log("blur", item.target.value);
    },
    //回车事件处理
    handleOpen(value, type) {
      console.log("open", value, type);
      switch (type) {
        case 1:
          this.getChartInfo("Charter", value);
          this.tableVisible.charterVisible = true;
          break;
        case 2:
          this.getChartInfo("ContractNo", value);
          this.tableVisible.contractVisible = true;

          break;
        case 3:
          this.getChartInfo("Phone", value);
          this.tableVisible.phoneVisible = true;

          break;
        case 4:
          this.getChartInfo("IDNo", value);
          this.tableVisible.idnoVisible = true;

          break;

        default:
          break;
      }
    },
    //获取合同列表
    getChartInfo(key, value) {
      let data = { [key]: value };
      getChartInfoRoom(data).then(res => {
        if (res.code === 100) {
          this.gridData = res.body.rows;
          this.listLoading = false;
        }
      });
    },
    //表格行点击事件
    rowClick(row, column, event) {
      console.log("row", row, column, event);
      this.formData = row;
      this.$emit("getChartInfo", row);
      this.initTableVisible();
    },
    //所有表格隐藏
    initTableVisible() {
      this.tableVisible.charterVisible = false;
      this.tableVisible.contractVisible = false;
      this.tableVisible.phoneVisible = false;
      this.tableVisible.idnoVisible = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>